<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">{{hotel.venueById.venue_title}}</nut-navbar>
    
    <nut-swiper
    direction="horizontal"
    ref="demo3"
    :loop="true"
    :canDragging="false"
    :paginationVisible="true"
    >
        <div class="nut-swiper-slide" v-for="(vo,index) in hotel.bannerImg" :key="index">
            <img v-bind:src="$fileurl + vo.photo_url">
        </div>

        
    </nut-swiper>
    <!-- banner -->

    <div class="introduce_title">
        <nut-col :span="24">
            <div class="flex-content title">{{hotel.venueById.venue_title}}</div>
        </nut-col>
        <nut-col :span="8">
            <div class="flex-content option">楼层：{{hotel.venueById.site_floor}}层</div>
        </nut-col>
        <nut-col :span="8">
            <div class="flex-content option">面积：{{hotel.venueById.site_area}}平方</div>
        </nut-col>
        <nut-col :span="8">
            <div class="flex-content option">最高容纳：{{hotel.venueById.site_size}}人</div>
        </nut-col>
    </div>
    <!-- 标题简介 -->

    <div class="introduce_content">
        <div class="title">场地详细信息</div>
        <div class="parameter">
            <nut-row type="flex" flexWrap="wrap" >

                <nut-col :span="12" v-for="(vo,index) in hotel.Config" :key="index">
                    <div v-if="vo.type == 1 || vo.type == 2" >
                    <div class="flex-content">{{vo.b_name}}：{{vo.config_name}}</div>
                    </div>
                </nut-col>

            </nut-row>
        </div>
    </div> 
    <!-- 场地详细信息 -->

    <div class="introduce_content">
        <div class="title">会场简介</div>
        <div class="parameter">
            <div v-html="hotel.venueById.venue_content" class="parameter_content">
                
            </div>
        </div>
    </div> 
    <!-- 会场简介 -->

    <div class="introduce_content">
        <div class="title">场地案例</div>
        <div class="parameter">
            <a :href="hotel.venueById.article_url">{{hotel.venueById.article_url}}</a>
        </div>
    </div> 
    <!-- 会场简介 -->

    <div class="introduce_people">
        <div class="title">最多可容纳：<span>{{hotel.venueById.site_size}}人</span></div>
        <div class="parameter">
            <nut-row type="flex" flexWrap="nowrap" :gutter="10" >

                
            <nut-col :span="4" v-for="(vo,index) in hotel.Config" :key="index" v-show="vo.type == 3" >
                <img v-bind:src="$fileurl + vo.b_ico">
                <span>{{vo.b_name}}</span>
                <span>{{vo.config_name}}</span>
            </nut-col>
                
            </nut-row>
        </div>
    </div> 
    <!-- 容纳人数 -->

    <div class="introduce_swiper">
        <div class="title">会场平面图</div>
        <div class="introduce_img">
            <nut-swiper
                direction="horizontal"
                ref="demo1"
                :loop="true"
                :canDragging="false"
                :paginationVisible="true"
                >
                <div  class="nut-swiper-slide" v-for="(vo,index) in hotel.planeImg" :key="index">
                    <img v-bind:src="$fileurl + vo.photo_url">
                </div>
                
            </nut-swiper>
        </div>
    </div>
    <!-- 会场平面 -->

    <div class="introduce_swiper">
        <div class="title">会场展示图</div>
        <div class="introduce_img">
            <nut-swiper
                direction="horizontal"
                ref="demo1"
                :loop="true"
                :canDragging="false"
                :paginationVisible="true"
                >
                <div  class="nut-swiper-slide" v-for="(vo,index) in hotel.showImg" :key="index">
                    <img v-bind:src="$fileurl + vo.photo_url">
                </div>
                
            </nut-swiper>
        </div>
    </div>
    <!-- 会场平面 -->


  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getListApi, getDetailsByIdApi } from '../../api/schedule'
  import { IconUrl } from '../../utils/auxiliary'
  import Qs from 'qs'

  export default {
    data () {
      return {
         hotel:[],
         info:[]
      }
    },

    async mounted () {
      this.getContent()
    },
    
    methods: {
        getContent(){
            const query = Qs.parse(location.search.substring(1))
            let id = query.id
            this.$http.get(this.$url + '/inf/venue/getVenueByIdConfig',{
                params:{
                    venueId:id
                }
            })
            .then(response => {
                //photo_url
                var i
                for(i=0;i<response.data.bannerImg.length;i++){
                    let reg=new RegExp('file','g')
                    let newMsg=response.data.bannerImg[i].photo_url.replace(reg,'fileImg');
                    response.data.bannerImg[i].photo_url = newMsg;
                    console.log(response.data)
                }
                var d
                for(d=0;d<response.data.planeImg.length;d++){
                    let reg=new RegExp('file','g')
                    let newMsg=response.data.planeImg[d].photo_url.replace(reg,'fileImg');
                    response.data.planeImg[d].photo_url = newMsg;
                    console.log(response.data)
                }
                var c
                for(c=0;c<response.data.showImg.length;c++){
                    let reg=new RegExp('file','g')
                    let newMsg=response.data.showImg[c].photo_url.replace(reg,'fileImg');
                    response.data.showImg[c].photo_url = newMsg;
                    console.log(response.data)
                }
                console.log(response.data.bannerImg);

                var d
                for(d=0;d<response.data.Config.length;d++){
                    let reg=new RegExp('file','g')
                    let newMsg=response.data.Config[d].b_ico.replace(reg,'fileImg');
                    response.data.Config[d].b_ico = newMsg;
                    console.log(response.data)
                }
                
                this.hotel = response.data;
                
            })
            .catch(error => {
                
            })
        }
    }
  }
</script>

<style lang="scss">
  body{
    background: #F9F9F9;
  }
  .horizontal{
      img{
          width: 100%;
          height: 200px;
      }
  }
  .introduce_title{
      padding:15px;
      background: #fff;
      overflow: hidden;
      .title{
          font-size: 14px;
          margin-bottom:10px;
      }
      .option{
          color:#666;
      }
  }
  .introduce_content{
      padding:15px;
      background: #fff;
      overflow: hidden;
      margin-top:1rem;
      .title{
          display: flex;
          margin-bottom:1rem;
          font-size: 14px;
      }
      .parameter{
          color:#666;
          .flex-content{
              margin-bottom:0.5rem;
          }
      }
  }
  .introduce_people{
      padding:15px;
      background: #fff;
      overflow: hidden;
      margin-top:1rem;
      .title{
          display: flex;
          margin-bottom:1rem;
          font-size: 14px;
          span{
              color:#B29462;
          }
      }
      .parameter{
          text-align: center;
          img{
              display: block;
              height: 35px;
              width: 100%;
              margin-bottom:5px;
          }
          span{
              width: 100%;
              text-align: center;
          }
      }
  }
  .introduce_swiper{
      padding:15px;
      background: #fff;
      overflow: hidden;
      margin-top:1rem;
       .title{
          display: flex;
          margin-bottom:1rem;
          font-size: 14px;
      }
      .introduce_img{
          width: 100%;
          border-radius: 5px;
          img{
              width: 100%;
              border-radius: 5px;
          }
      }
  }
  .parameter_content{
      img{
          width: 100%;
      }
  }
</style>
